<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.css">
    <style>
        .login-box {
            margin-top: 300px;
            margin-left: 400px;
        }
    </style>
</head>
<body>
<div class="login-box">

    <div>
        <div>用户名:<input id="username"/></div>
    </div>
    <div>
        <div>密码:<input id="password"/></div>
    </div>
    <div>
        <button id="btnLogin">登录</button>
    </div>


</div>

</body>
<script src="../lib/jquery.js"></script>

<script>

    $('#btnLogin').bind('click', function () {

        const user = {
            username: $('#username').val(),
            password: $('#password').val()
        }

        $.ajax({
            url: '../mock/user.json',
            method: 'get',
            dataType: 'json',
            success: function (data) {

                if (user.username == data.username
                    && user.password == data.password) {

                    window.location.href = "user.html";

                } else {
                    alert("用户名或者密码错误！")
                }
            }
        })

    })

</script>
</html>
